<template>
	<Header :class="getHeaderClass">
		<!-- left start -->
		<div :class="`${prefixCls}-left`">
			<!-- logo -->
			<Applogo
				v-if="getShowHeaderLogo"
				:class="`${prefixCls}-logo`"
				:theme="getHeaderTheme"
				:style="getLogoWidth"
			/>
			<LayoutTrigger v-if="getShowContent && getShowHeaderTrigger" :theme="getHeaderTheme" :sider="false" />
			<LayoutBreadcrumb v-if="getShowContent && getShowBreadCrumb" :theme="getHeaderTheme" />
		</div>
		<!-- left end -->

		<!-- action  -->
		<div :class="`${prefixCls}-action`">
			<!-- <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" /> -->

			<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />

			<UserDropDown :theme="getHeaderTheme" />

			<!-- <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" /> -->
		</div>
	</Header>
</template>
<script lang="ts">
import { defineComponent, unref, computed } from 'vue';

import { propTypes } from '@/utils/propTypes';

import { Layout } from 'ant-design-vue';
import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '../trigger/index.vue';

import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useRootSetting } from '@/hooks/setting/useRootSetting';

import { SettingButtonPositionEnum } from '@/enums/appEnum';

import { UserDropDown, LayoutBreadcrumb, Notify } from './components';
import { Applogo } from '@/components/Application';
import { useDesign } from '@/hooks/web/useDesign';

// import { createAsyncComponent } from '@/utils/createAsyncComponent';

export default defineComponent({
	name: 'LayoutHeader',
	components: {
		Header: Layout.Header,
		LayoutTrigger,
		LayoutBreadcrumb,
		LayoutMenu,
		UserDropDown,
		Notify,
		Applogo,
		// TODO:
		// SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
		// 	loading: true,
		// }),
	},
	props: {
		fixed: propTypes.bool,
	},
	setup(props) {
		const { prefixCls } = useDesign('layout-header');
		const { getShowHeaderTrigger, getMenuWidth, getIsMixMode } = useMenuSetting();
		const { getShowSettingButton, getSettingButtonPosition, getShowBreadCrumb, getLogoAsWideAsMenu } =
			useRootSetting();

		const { getShowNotice, getShowContent, getShowHeader, getShowSearch, getShowHeaderLogo, getHeaderTheme } =
			useHeaderSetting();

		const getHeaderClass = computed(() => {
			const theme = unref(getHeaderTheme);

			return [
				prefixCls,
				{
					[`${prefixCls}--fixed`]: props.fixed,
					[`${prefixCls}--${theme}`]: theme,
				},
			];
		});

		const getShowSetting = computed(() => {
			if (!unref(getShowSettingButton)) {
				return false;
			}
			const settingButtonPosition = unref(getSettingButtonPosition);

			if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
				return unref(getShowHeader);
			}
			return settingButtonPosition === SettingButtonPositionEnum.HEADER;
		});

		const getLogoWidth = computed(() => {
			if (!unref(getIsMixMode)) {
				return {};
			}
			const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
			if (unref(getLogoAsWideAsMenu)) {
				return { minWidth: `${width}px` };
			}
			return { width: `${width}px` };
		});

		return {
			prefixCls,
			getHeaderClass,
			getShowHeaderTrigger,
			getShowBreadCrumb,
			getShowContent,
			getShowNotice,
			getLogoWidth,
			getShowSettingButton,
			getShowSetting,
			getShowSearch,
			getShowHeaderLogo,
			getHeaderTheme,
		};
	},
});
</script>
<style lang="less">
@import './index.less';
</style>
